<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>四y-登录</title>
    <!-- google fonts -->
    <link href="/static/css/login_css.css" rel="stylesheet">
    <!-- Template CSS -->
    <link rel="stylesheet" href="/static/css/style-starter.css">
</head>

<body>
<!--header-->
<header id="site-header" class="fixed-top">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark stroke">
            <h1>
                <a class="navbar-brand" href="#">四汤一菜</a>
            </h1>
            <!-- if logo is image enable this
      <a class="navbar-brand" href="#index.html">
          <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
      </a> -->
            <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
                    data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
                <span class="navbar-toggler-icon fa icon-close fa-times"></span>
                </span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul class="navbar-nav ml-lg-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="">首页<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">防传染</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">疫情可视化</a>
                    </li>
                    <li class="nav-item mr-lg-1">
                        <a class="nav-link" href="">答题测试</a>
                    </li>
                    <!--/search-right-->
                    <li class="header-search mr-lg-2 mt-lg-0 mt-4 position-relative">
                        <div class="search-right">
                            <a href="/login/" class="btn btn-style search-btn" title="search">登录</a>

                        </div>
                    </li>
                    <!--//search-right-->
                </ul>
            </div>


            <!-- toggle switch for light and dark theme -->
            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input type="checkbox" id="checkbox">
                            <div class="mode-container py-1">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
            <!-- //toggle switch for light and dark theme -->
        </nav>

    </div>
</header>
<!--/header-->

<!-- hero slider Start -->
<div class="banner-wrap">
    <div class="banner-slider">
        <!-- hero slide start -->
        <div class="banner-slide bg1">
            <div class="hero-overlay">
                <div class="content-center" id="login-div">
                    <form action="/login/" method="post">
                        <label for="username">账号:
                            <input id="username" name="username" type="text">
                        </label>
                        <label for="password">
                            密码:
                            <input name="password" id="password" type="password">
                        </label>

                    </form>
                </div>
            </div>
        </div>
        <!-- hero slide end -->

    </div>
</div>
<!-- hero slider end -->
<!--/home-stats-->
<script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("movetop").style.display = "block";
        } else {
            document.getElementById("movetop").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<!-- /move top -->
<!-- //copyright -->
<!--//footer-->
<!-- Template JavaScript -->
<script src="/static/js/jQuery-v3.3.1.min.js"></script>
<script src="/static/js/theme-change.js"></script>

<!-- disable body scroll which navbar is in active -->
<script>
    $(function () {
        $('.navbar-toggler').click(function () {
            $('body').toggleClass('noscroll');
        })
    });
</script>
<!-- disable body scroll which navbar is in active -->

<!--/MENU-JS-->
<script>
    $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 80) {
            $("#site-header").addClass("nav-fixed");
        } else {
            $("#site-header").removeClass("nav-fixed");
        }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
        if ($(window).width() > 991) {
            $("header").removeClass("active");
        }
        $(window).on("resize", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
        });
    });
</script>
<!--//MENU-JS-->
<script src="/static/js/bootstrap.min.js"></script>

</body>

</html>